<template>
  <div class="list">
     <section>
         <ul class="to-list">
             <li  v-bind:key="item" v-for="(item,index) in list"><label><input type="checkbox" id="check"    v-model="isAgree" :value="index">{{item}}</label><button class="btn" @click="remove(index,item)">删除</button></li>
         </ul>
         
         <p>已完成{{isAgree.length}}/{{list.length}}</p>
         <button class="del" @click="del">删除已勾选项</button>
         
     </section>

     
  </div>
</template>

<script>
import bus from '../bus'
export default {
  name: 'list_com',
  data(){
        return{list:["学vue","吃早饭","睡午觉"],
         isAgree:[]

        
        }
},
// computed: {
//     // 全选状态
//     isAgree() {
//       if (this.list.length == 0) {
//         return false;
//       }
//       return !this.list.find(item => !item.checked);
//     }
//   },
mounted(){
    bus.$on('tolist',(data)=>{
      this.list.push(data)
    })
},
methods:{
  remove:function(index,item){
            console.log(index);
            this.list.splice(index,1);
            },
  // select:function(){
  //           var state=document.getElementById("check").checked
  //           console.log(state);
  //           } 
  change() {
      // if (this.isAgree) {
      //   this.list.forEach(v => (v.checked = false));
      // } else {
      //   this.list.forEach(v => (v.checked = true));
      // }
      // console.log(this.isAgree);
      
    },

  del:function() {
      //  for (
      //   var i = 0, flag = true, len = this.list.length;
      //   i < len;
      //   flag ? i++ : i
      // ) {
      //   if (this.list[i] && this.list[i].checked == true) {
      //     this.list.splice(i, 1);
      //     flag = false;
      //   } else {
      //     flag = true;
      //   }
      // }
      this.isAgree.sort( (a,b) => {
                return b-a;
            })
            for(let i=0;i<this.isAgree.length;i++){
                this.list.splice(this.isAgree[i],1)
            }
            this.isAgree.length = 0
      },
         

 
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .text{
      width: 500px;
      }
      .to-list{
        list-style-type:none;
      }
      li{
        
        
        width:540px;
        background-color: aquamarine;
        border: solid black 1px;
      }
      label{
        position: relative;
        /* left:20px; */
        float: left;
      }
    .btn{
    position: relative;
    right: -200px;
    font-size: 16px;
    margin: 0px;
    padding: 0px;
    border: 0px;
    outline: none;
    background-color: aquamarine;
  }
  .del{
    position: relative;
    left: -200px;
  }
  p{
    position: relative;
    left: -210px;
  }
</style>